<template>
	<view>
		<u-sticky>
			<view class="header-search">
				<u-search v-model="shopName" :show-action="false" borderColor="rgb(230, 230, 230)" bgColor="#fff"
					placeholder="请输入商家名称" @change="$u.debounce(searchGetList, 500)"></u-search>
			</view>
		</u-sticky>

		<!--列表-->
		<view class="shop-list-box">
			<view :class="classListTypeBg(item.platform)" class="details-list u-flex" v-for="item in listData"
				:key="item.id">
				<view class="details-img-con">
					<image class="details-img" :src="item.shopLogo" mode="aspectFill"></image>
				</view>
				<view class="details-item">
					<view class="details-title-text m-b-10">{{item.shopName}}</view>
					<view class="item-content-p-t u-flex m-b-10">
						<view class="price">满{{item.returnThreshold}}返{{item.fullRefund}}</view>
						<view class="time">{{item.startTimeFormat}}-{{item.endTimeFormat}}</view>
					</view>
					<view class="item-content-desc u-flex m-b-10">
						<text class="desc-cont">月售{{item.monthly}}</text>
						<text class="desc-cont">人均{{item.average}}元</text>
						<view class="desc-cont u-flex"><u-icon name="tags"></u-icon> {{item.distance}}km</view>
					</view>
					<view class="item-content-bottom u-flex" @tap="toOrderGrabbing(item)">
						<view class="bottom-item">剩余<text class="num">{{item.surplusQuantity}}</text>份<text
								class="sign">{{item.completeRequire_dictText}}</text></view>
						<view class="bottom-btn">去抢单</view>
					</view>
				</view>
			</view>
			
			<u-empty marginTop="100rpx" v-if="!listData.length" :icon="getimageUrl('empty-home.png')"></u-empty>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, unref, reactive, onMounted, getCurrentInstance } from 'vue'
	import { queryUserActivityPage } from '@/common/index.api';
	import { onReachBottom, onPullDownRefresh, onLoad } from '@dcloudio/uni-app';
	import { getimageUrl } from '@/util/util.js';

	const { proxy } = getCurrentInstance();
	let shopName = ref('')
	const state = reactive({
		filtrate: {
			pageNo: 1,
			pageSize: 10,
			latitude: 0,
			longitude: 0,
			shopName: '',
			shopType: ''
		},
		loadStatus: 'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
		isLoadMore: false,  //是否加载中
	})
	let listData = ref([])

	onLoad(async (option) => {
		console.log(option)
		state.filtrate.shopType = option.searchVal
		// listInit()
	})

	onMounted(() => {
		state.filtrate.latitude = unref(proxy['vuex_current_position']).location.lat
		state.filtrate.longitude = unref(proxy['vuex_current_position']).location.lng
	})

	function listInit() {
		state.filtrate.latitude = unref(proxy['vuex_current_position']).location.lat
		state.filtrate.longitude = unref(proxy['vuex_current_position']).location.lng
		state.filtrate.pageNo = 1
		listData.value = []
		getList()
	}

	function classListTypeBg(type) {
		var genderMap = {
			'ele': 'list-bgimg-elme',
			'mt': 'list-bgimg-meituan',
			'dy': 'list-bgimg-douyin',
		};
		return genderMap[type]
	}

	async function getList() {
		const result = await queryUserActivityPage({ userId: unref(proxy['vuex_user']).id, ...state.filtrate })
		if (result.records.length !== 0) {
			listData.value = listData.value.concat(result.records)
			if (listData.value.length === result.total) {
				state.isLoadMore = true
				state.loadStatus = 'nomore'
			} else {
				state.isLoadMore = false
			}
		} else {
			state.isLoadMore = true
			state.loadStatus = 'nomore'
		}
	}

	function toOrderGrabbing() {
		uni.navigateTo({
			url: '/pages/orderGrabbing/orderGrabbing'
		});
	}

	//上拉触底函数
	onReachBottom(() => {
		if (!state.isLoadMore) {  //此处进行判断上锁，防止重复请求
			state.isLoadMore = true
			state.filtrate.pageNo += 1//页数加1
			getList()
		}
	})

	// 上拉刷新
	onPullDownRefresh(() => {
		//重新触发获取数据方法，刷新接口
		listInit()
		//结束刷新
		uni.stopPullDownRefresh()
	})

	function searchGetList() {
		state.filtrate.shopName = unref(shopName)
		listInit()
	}
</script>

<style lang="scss" scoped>
	.header-search {
		padding: 20rpx;
		background-color: #fff;
	}

	.shop-list-box {
		margin-top: 20rpx;
	}
</style>